<%--
  Created by IntelliJ IDEA.
  User: lingshao
  Date: 2020/9/17
  Time: 9:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>补考表</title>
    <!--导入layui相关的样式-->
    <link rel="stylesheet" href="../layui/layui/css/layui.css" media="all">
    <!-- 导入layui函数库 -->
    <script src="../layui/layui/layui.js" charset="utf-8"></script>
    <!--加载jQuery函数库-->
    <script src="../jQuery/jquery-1.11.2.js"></script>
    <!-- 注意：导入外部库的时候要注意改成自己的路径 -->
    <style type="text/css">
        .layui-table-cell{
            height:36px;
            line-height: 36px;
        }
        *{
            font-size: 20px;
            font-family: 微软雅黑;
        }
    </style>


    <script type="text/javascript">
        $(function () {
            //查询所有课程名称
            $.ajax({
                async:true,
                url:"../CourseServlet?method=findCourse",
                type:'GET',
                data:"",
                success:function (data) {
                    data=$.parseJSON(data);
                    var leng=data.json1;
                    var str="<option value=''>"+"--请选择课程名称--"+"</option>";
                    $.each(leng,function (index,item) {
                        str+="<option value="+item.courseName+">"+item.courseName+"</option>";
                    });
                    $("#courseName").append(str);
                }
            });

            //查询试卷编号
            $.ajax({
                async:true,
                url:"../ReexamsServlet?method=findPaperId",
                type:'GET',
                data:"",
                success:function (data) {
                    data=$.parseJSON(data);
                    var leng=data.json1;
                    var str="<option value=''>"+"--请选择试卷--"+"</option>";
                    $.each(leng,function (index,item) {
                        str+="<option value="+item.paperId+">"+item.paperId+"</option>";
                    });
                    $("#paperId").append(str);
                }
            });
        });

    </script>
</head>
<body>

<%--<!--添加和修改弹出对话框-->--%>
<%--<div style="display: none;" id="MaxDiv">--%>
<%--    <div style="margin-top: 40px;margin-left: 30px;">--%>
<%--        <form class="layui-form" id="myForm" method="post" lay-filter="myForm">--%>
<%--            <div class="layui-form-item">--%>
<%--                <label class="layui-form-label">选择试卷</label>--%>
<%--                <div class="layui-input-inline">--%>
<%--                    <select name="paperId" id="paperId" >--%>

<%--                    </select>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--            <div class="layui-form-item">--%>
<%--                <div class="layui-input-block">--%>
<%--                    <button class="layui-btn" style="margin-left: 50px; font-size: 20px;font-family: 微软雅黑"   id="okk"  >确认</button>--%>
<%--                    <button type="reset" style="font-size: 20px;font-family: 微软雅黑" lay-submit lay-filter="okkFilters" class="layui-btn layui-btn-warm">取消</button>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </form>--%>
<%--    </div>--%>
<%--</div>--%>

<%--<!--添加和修改弹出对话框-->--%>
<%--<div style="display: none;" id="MinDiv">--%>
<%--    <div style="margin-top: 40px;margin-left: 30px;">--%>
<%--        <form class="layui-form" id="minForm" method="post" lay-filter="minForm">--%>
<%--            <div class="layui-form-item">--%>
<%--                <label class="layui-form-label">试卷编号</label>--%>
<%--                <div class="layui-input-inline" style="width: 300px">--%>
<%--                    <select name="paperId" >--%>
<%--                        <option value="" >--请选择试卷编号--</option>--%>
<%--                        <option value="1">1</option>--%>
<%--                        <option value="2" >2</option>--%>
<%--                        <option value="3" >3</option>--%>
<%--                        <option value="4" >4</option>--%>
<%--                    </select>--%>
<%--                </div>--%>
<%--            </div>--%>

<%--            <div class="layui-form-item">--%>
<%--                <div class="layui-input-block">--%>
<%--                    <button class="layui-btn" id="okk" style="margin-left: 50px;  font-size: 20px;font-family: 微软雅黑" lay-submit lay-filter="okkFilters" >确认</button>--%>
<%--                    <button type="reset" style="font-size: 20px;font-family: 微软雅黑"  class="layui-btn layui-btn-warm">取消</button>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </form>--%>
<%--    </div>--%>
<%--</div>--%>


<%--添加和修改弹出对话框--%>
<div style="display: none;" id="MaxDiv">
    <div style="margin-top: 40px;margin-left: 20px;">
        <form class="layui-form" id="mainForm" method="post" lay-filter="myForm">
            <div class="layui-form-item">
                <label class="layui-form-label">选择试卷</label>
                <div class="layui-input-block" style="max-width:300px;">
                    <select name="paperId" id="paperId" >
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn   " style="margin-left: 40px"  id="okk"  lay-submit lay-filter="okkFilter" >确认</button>
                    <button type="reset" class="layui-btn layui-btn-warm">重置</button>

                </div>
            </div>
        </form>
    </div>
</div>






<blockquote class="layui-elem-quote news_search">
    <!-- 多条件查询层开始 注意：要与数据表格放在一起-->
    <div class="layui-row" hidden="true">
        <form class="layui-form layui-col-md12 x-so" id="emp_search">
            <div class="layui-input-inline">
                <input type="text" style="width: 220px;height: 30px;" name="stuName" id="stuId" placeholder="请输入学生名字" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <select name="courseName" id="courseName" >
<%--                    <option value="" >--请选择科目--</option>--%>
<%--                    <option value="1">HTML5</option>--%>
<%--                    <option value="2" >java基础</option>--%>
<%--                    <option value="3" >java面向对象</option>--%>
<%--                    <option value="4" >mysql数据库</option>--%>
<%--                    <option value="5" >javaWeb</option>--%>
<%--                    <option value="5" >javaScript</option>--%>
                </select>
            </div>
            <div class="layui-inline" >
                <button class="layui-btn layui-btn-radius layui-btn-normal layui-icon layui-icon-search" style="font-size: 20px;font-family: 微软雅黑" lay-submit lay-filter="search">搜索</button>
            </div>
        </form>
    </div>
    <!-- 多条件查询层结束 -->
    <!-- 数据表格 -->
    <table class="layui-hide" id="reeTable" lay-filter="reeList"></table>
</blockquote>



<!-- 行中操作按钮 [仅对本行操作]-->
<script type="text/html" id="barDemo">
<%--    <a class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm layui-icon layui-icon-edit" style="font-size: 20px;font-family: 微软雅黑" lay-event="update">修改</a>--%>
    <a class="layui-btn layui-btn-sm layui-btn-radius layui-icon layui-icon-ok" id="ok" style="font-size: 20px;font-family: 微软雅黑" lay-event="okRee">允许补考</a>
</script>
<!-- 脚本代码 -->
<script type="text/javascript">
    layui.use(['table','layer','form','laypage','util',"jquery"],function () {
        //导入模块并得到模块对象
        var table = layui.table,//表格对象
            layer = layui.layer,//弹层对象
            form = layui.form,//表单对象
            laypage = layui.laypage,//分页组件
            $=layui.jquery,//jquery对象
            util=layui.util;//工具对象
        //渲染表格对象
        table.render({
            //id:"empReload",//为多条件搜索重新加载使用,存在问题：增加数据后不自动刷新
            elem: '#reeTable',//表格对象
            cellMinWidth: 80,
            height:665,
            method:'post',
            url:"../ReexamsServlet?method=findAll",//"EmpServlet?method=findAll",////实际使用servlet路径(后台服务路径)
            page: true,//分页
            method:'post',//提交方式
            toolbar: '#emp_search',//表格上方普通工具栏
            limit:5,//每页行数
            // parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
            //     var result;
            //     console.log(this);
            //     console.log(JSON.stringify(res));
            //     if (this.page.curr) {
            //         result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
            //     }
            //     else {
            //         result = res.data.slice(0, this.limit);
            //     }
            //     return {
            //         "code": res.code, //解析接口状态
            //         "msg": res.msg, //解析提示文本
            //         "count": res.count, //解析数据长度
            //         "data": result //解析数据列表
            //     };
            // },
            cols: [
                [
                    {checkbox:true},//开启多选框
                    {field:"reexamsId",title:"补考编号",align:"center",sort:true},
                    {field:"stuName",title:"学生姓名",align:"center"
                        // ,templet:function (d) {
                        //     if (d.stuId=="t28603"){
                        //         return '<span>胡标</span>'
                        //     }else if (d.stuId=="t28604"){
                        //         return '<span>阳赛</span>'
                        //     }else if (d.stuId=="t28608"){
                        //         return '<span>游永康</span>';
                        //     }else if (d.stuId=="t28610"){
                        //         return '<span>阳结</span>';
                        //     }
                        // }
                        },
                    {field:"courseName",title:"科目名称",align:"center"
                        // ,templet:function (d) {
                        //     if (d.courseId==1){
                        //         return '<span>HTML5</span>'
                        //     }else if (d.courseId==2){
                        //         return '<span>java基础</span>'
                        //     }else if (d.courseId==3){
                        //         return '<span>java面象对象</span>';
                        //     }else if (d.courseId==4){
                        //         return '<span>MYSQL数据库</span>';
                        //     }
                        // }
                        },
                    {fixed: 'right', title:'操作', toolbar: '#barDemo',align:'center'}
                ]
            ],
            limits: [5,10,15,20] //每页行数据选择
        });

        //为删除和编辑添加事件
        /*
        * 删除：首先捕捉在功具条点击事件(添加对应的内置监听事件)，在函数中接收事件源，事件源.event获得的值即为
        * 点击标签的lay-event属性的值，取出值进行判断后，询问用户是否确认删除，确认后，通过ajax发送数据，接收
        * 响应后弹出提示并关闭询问框，最后刷新表格
        * */
        var closeDiv;
        var stuName;
        var reexamsId;
        //test是我们tablel表的layui-filter
        table.on("tool(reeList)",function(e){

            //判断点击的是删除事件
            //取得点击行的数据
            var data=e.data;
            stuName=data.stuName;
            reexamsId=data.reexamsId;
            if (e.event=="okRee"){
                //调出窗口
                closeDiv=layer.open({
                    type:1,
                    title:"选择试卷",
                    offset: 'auto',
                    area:["500px","250px"],
                    content:$("#MaxDiv").html()
                });

                //更新下拉框状态
                layui.use('form', function(){
                    var form = layui.form;
                    form.render(); //更新  所在容器内的全部 select 状态
                });





                // layer.confirm("是否允许补考？",function () {
                //     //形式上删除这一行
                //     e.del();
                //     $.ajax({
                //         type:"post",
                //         url:"../ReexamsServlet?method=delete",//该路径仅供测试
                //         data:"reexamsId="+data.reexamsId,
                //         dataType:"text",
                //         success:function(data){
                //             if (data=="ok"){
                //                 layer.msg("操作成功",{icon:1,time:2000});
                //                 //添加成功，返回了一行数据id,servlet接收后删除，删除成功后返回ok
                //             }else{
                //                 layer.msg("操作失败",{icon:2,time:2000});
                //             }
                //         }
                //     });
                //     //点击后关闭对话框
                //     layer.close(index);
                // });
            }
            // else if (e.event=="update"){//判断点击的为编辑
            //     //让主键和学生姓名和科目编号不能修改
            //     $("#stopText").attr("readonly","readonly");
            //     $("#sudentText").attr("readonly","readonly");
            //     $("#bokkText").attr("readonly","readonly");
            //     //将确认按钮改为修改
            //     $("#okk").text("修改");//它是对话框当中的内容
            //
            //     //打开对话框
            //     closeDiv=layer.open({
            //         type:1,
            //         title:"修改内容",
            //         offset: 'auto',
            //         area:["500px","380px"],
            //         content:$("#MaxDiv").html()
            //     });
            //
            //
            //     //将数据添加到表单当中
            //     form.val("myForm",{
            //         "reexamsId":data.reexamsId,
            //         "stuId":data.stuId,
            //         "courseId":data.courseId
            //     });
            //
            //
            // }
        });

        //判断点击的是搜索submit是指定的事件，在对应的标签上添加lay-submit即可，search是指定的lay-filter的值，如果没有，在标签上添加即可
        form.on("submit(search)",function(data){
            //获取数据
            var dataTable=data.field;
            if (dataTable.stuName!="" || dataTable.courseName!=""){//判断输入的值都不为空
                //重载表格，刷新时发送数据
                table.reload("reeTable",{//table标签的id
                    page:{//刷新后从第几页开始显示
                        curr: 1
                    },
                    where:{
                        stuName:dataTable.stuName,
                        courseName:dataTable.courseName
                    }
                });
            }else{
                layer.msg("输入的内容不能为空");
            }
            return false;
        });


        // //判断点击的是修改还是增加
        // form.on("submit(okkFilter)",function(data){
        //     //拿到jQuery元素
        //     var elem=$("#okk").text();
        //     //var elem=$(data.elem);//因为拿到的是dom对象所以要转换成jqeury对象才可以调用text()
        //     //alert(elem.text());
        //     //判断点击的按钮是修改还是增加
        //     if (elem=="修改"){
        //         //将数据发送到服务器端
        //         $.ajax({
        //             type:"POST",
        //             url:"../Test",
        //             data:"json="+JSON.stringify(data.field),
        //             dataType:"text",
        //             success:function(data){
        //                 //判断修改是否成功
        //                 if (data=="ok"){
        //                     layer.msg("修改成功");
        //                 }else{
        //                     layer.msg("修改失败");
        //                 }
        //             }
        //         });
        //         //不管添加成功还是失败，都需要清空对话框，防止为下次添加时造成影响
        //         $("#myForm")[0].reset();
        //         //关闭对话框
        //         layer.close(closeDiv);
        //         return false;//不进行跳转，也就是不再表格显示时再次请求XXX.json
        //     }
        //
        // });

         // form.on("submit(okkFilters)",function(data){
         //     //拿到jQuery元素
         //     var elem=$("#okk").text();
         //    //var elem=$(data.elem);//因为拿到的是dom对象所以要转换成jqeury对象才可以调用text()
         //    //alert(elem.text());
         //     //判断点击的按钮是修改还是增加
         //     if (elem=="确定"){
         //         $.ajax({
         //             type:"post",
         //             url:"../ReexamsServlet?method=delete&paperId="+data.field.paperId+"&stuName="+data.field.stuName,//该路径仅供测试
         //             data:"reexamsId="+data.reexamsId,
         //             dataType:"text",
         //             success:function(data){
         //                 if (data=="ok"){
         //                     layer.msg("操作成功",{icon:1,time:2000});
         //                     table.reload('demo');
         //                     //将数据发送到服务器端
         //                     e.del();
         //                     //添加成功，返回了一行数据id,servlet接收后删除，删除成功后返回ok
         //                 }else{
         //                     layer.msg("操作失败",{icon:2,time:2000});
         //                 }
         //             }
         //         });
         //         //不管添加成功还是失败，都需要清空对话框，防止为下次添加时造成影响
         //         $("#myForm")[0].reset();
         //         //关闭对话框
         //         layer.close(closeDiv);
         //     }else if (elem=="取消"){
         //         layer.close(closeDiv);
         //     }
         //     return false;
         // });

        //判断点击的是修改还是增加
        form.on("submit(okkFilter)",function(data){
            var paperId=data.field.paperId;
            //拿到jQuery元素
            var elem=$("#okk").text();
            //var elem=$(data.elem);//因为拿到的是dom对象所以要转换成jqeury对象才可以调用text()
            //alert(elem.text());
            //判断点击的按钮是修改还是增加
            if (elem=="确认"){
                //将数据发送到服务器端
                $.ajax({
                    type:"POST",
                    url:"../ReexamsServlet?method=delete",
                    data:"paperId="+paperId+"&stuName="+stuName+"&reexamsId="+reexamsId,
                    dataType:"text",
                    success:function(data){
                        //判断修改是否成功
                        if (data=="ok"){
                            layer.msg("修改成功");
                            table.reload('reeTable');
                        }else{
                            layer.msg("修改失败");
                        }
                    }
                });
                //不管添加成功还是失败，都需要清空对话框，防止为下次添加时造成影响
                $("#mainForm")[0].reset();
                //关闭对话框
                layer.close(closeDiv);
                return false;//不进行跳转，也就是不再表格显示时再次请求XXX.json
            }
        });

    });
</script>
</body>
</html>